<template>
  <div class="root">
<!--    <div class="title">学员管理</div>-->
    <StudentDrawer :type="drawerType" :data="drawerData" />
    <div class="add-student">
      <button @click="toggleDrawer(DRAWER_TYPE.add)">添加学员</button>
    </div>
    <div class="employee-list">
      <el-table :data="store.studentList" style="width: 100%; max-width: 1200px;">
        <el-table-column fixed prop="name" label="姓名"/>
        <el-table-column prop="sex" label="性别">
          <template #default="scope">{{ SEX[scope.row.sex]!==undefined ? SEX[scope.row.sex] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="class_info.class_name" label="班级" min-width="140"/>
        <el-table-column prop="is_monitor" label="是否班长">
          <template #default="scope">{{ scope.row.is_monitor ? '是' : '否'}}</template>
        </el-table-column>
        <el-table-column prop="age" label="出生日期" min-width="100">
          <template #default="scope">{{ scope.row.age? scope.row.age : '-'}}</template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" min-width="120" />
        <el-table-column prop="email" label="邮箱" min-width="180" />
        <el-table-column prop="address" label="地址">
          <template #default="{ row }">
            {{JSON.parse(row.address).province + ' ' + JSON.parse(row.address).city}}
          </template>
        </el-table-column>
        <el-table-column prop="school" label="毕业院校" min-width="120" />
        <el-table-column prop="school_type" label="院校类型" min-width="120">
          <template #default="scope">{{ sysStore.SCHOOL_TYPE[scope.row.school_type]!==undefined ? sysStore.SCHOOL_TYPE[scope.row.school_type] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="major" label="专业" min-width="140" />
        <el-table-column prop="graduation_date" label="毕业时间" min-width="100" />
        <el-table-column prop="has_graduation_cert" label="是否有毕业证" min-width="80">
          <template #default="scope">{{ scope.row.has_graduation_cert ? "是" : '否'}}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">{{ sysStore.STUDENT_STATUS[scope.row.status]!==undefined ? sysStore.STUDENT_STATUS[scope.row.status] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="contact_person_phone" label="联系人电话" min-width="120" />
        <el-table-column prop="sale_info.name" label="所属销售" width="80" />
        <el-table-column prop="referrer" label="推荐人" width="80" />
<!--        <el-table-column prop="pay_type" label="付费方式" width="80" >-->
<!--          <template #default="scope">{{ sysStore.PAY_TYPE[scope.row.pay_type]!==undefined ? sysStore.PAY_TYPE[scope.row.pay_type] : '其他'}}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="pay_amount" label="付款金额" width="80" />-->
<!--        <el-table-column prop="loan_amount" label="贷款金额" width="80" />-->
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openStudentDetailPage(scope.row.id)">详情</el-button>
            <el-button link type="primary" size="small" @click="toggleDrawer(DRAWER_TYPE.edit, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-container">
        <PageSelect
            :pageInfo="pageDetailInfo"
            :totalCount="store.totalCount"
            @update:pageInfo="handlePageInfoUpdate"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useStudentStore} from "@/store/student";
import {SEX, SYS_DICT} from "@/dict/dict-sys";
import {DRAWER_TYPE} from "@/dict/dict-student";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
import StudentDrawer from "@/components/student/StudentDrawer.vue";
import PageSelect from "@/components/common/PageSelect.vue";
import router from "@/router";

const store = useStudentStore();
const sysStore = useSysDictStore();

onMounted(()=>{
  const data = {
    skip: pageDetailInfo.value.currentPage,
    limit: pageDetailInfo.value.pageSize
  }
  store.getStudentList(data);
  sysStore.getSysDict([SYS_DICT.SCHOOL_TYPE, SYS_DICT.STUDENT_STATUS, SYS_DICT.PAY_TYPE])
})


const drawerType = ref(DRAWER_TYPE.add)

let drawerData = {}
const toggleDrawer = (value, data) => {
  drawerType.value = value
  if(data){
    drawerData = {...data}
    store.toggleDrawer(data)
  }else{
    store.toggleDrawer()
  }
}

const openStudentDetailPage = (studentId) => {
 router.push({ name: 'StudentDetail', params: { studentId: studentId} })
}

const pageDetailInfo = ref({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
  totalPages: 0
})

const handlePageInfoUpdate = () => {
  const data = {
    skip: pageDetailInfo.value.currentPage,
    limit: pageDetailInfo.value.pageSize
  }
  store.getStudentList(data);
};

</script>

<style scoped lang="less">
.root{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  .add-student{
    text-align: left;
    button{
      margin-left: 20px;
      margin-top: 20px;
      width: 100px;
      height: 30px;
      color: #5FADFF;
      font-weight: bold;
      background-color: #fff;
      border: 1px solid #5FADFF;
      border-radius: 10px;
    }
  }
  .employee-list{
    padding: 20px 0px;
    // 让子标签的表格位于中间
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .page-container {
    margin-top: 20px;
  }
}
</style>